<%@page import="java.text.SimpleDateFormat"%>
<%@page import="com.home.qh.model.Itinerary"%>
<%@page import="java.util.List"%>
<%@page import="com.home.qh.model.Port"%>
<%@ include file="/common/taglibs.jsp"%>

<head>
    <title><fmt:message key="Voyage.EditTitle"/></title>
    <meta name="heading" content="<fmt:message key='Voyage.EditTitle'/>"/>
    <meta name="menu" content="VoyageFormMenu"/>
    <script type="text/javascript" src="<c:url value='/scripts/jquery/ui/jquery.ui.button.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/scripts/jquery/ui/jquery.ui.datepicker.js'/>"></script>
    <style>
		#toolbar {
			padding: 10px 10px;
			margin-top: 15px;
		}
	</style>
</head>

<% 
	int numberOfItineraries = 1;
	List<Port> listPorts = (List<Port>)request.getAttribute("listPorts");
	List<Itinerary> listItineraries = (List<Itinerary>)request.getAttribute("listItineraries");
	int size = 0;
	if(listItineraries != null && listItineraries.size()>0){
		size = listItineraries.size();
	}
	SimpleDateFormat simpleDateFormat = new SimpleDateFormat("dd/MM/yyyy");
%>
<div class="buttons" style="float:left;padding-right:15px;margin-top: 20px;">
	<form:form commandName="voyage" method="post" action="voyage_form.html" onsubmit="return onFormSubmit(this)" id="voyage_form" name="voyage_form">
		<form:hidden path="id"/>
		<input type="hidden" id="numberOfItineraries" name="numberOfItineraries" value=""/>
		<div id="data_area" name="data_area">
			<fieldset class="ui-widget ui-widget-content" style="width: 100%;margin-top: 12px; margin-bottom: 12px;">
				<legend class="ui-widget-header ui-corner-all" style="height: 12px;">
					<fmt:message key="Voyage.Information" />
				</legend>
				<table>
					<tr>
						<td> <appfuse:label styleClass="desc" key="Voyage.Code"/></td>
						<td>
							<form:errors path="code" cssClass="fieldError"/>
							<form:input path="code" id="voyageCode" cssClass="text ui-widget-content ui-corner-all" cssErrorClass="text error"/>
						</td>
					</tr>
					<tr>
						<td> <appfuse:label styleClass="desc" key="Voyage.Name"/></td>
						<td>
							<form:errors path="name" cssClass="fieldError"/>
							 <form:input path="name" id="voyageName" cssClass="text medium ui-widget-content ui-corner-all" cssErrorClass="text medium error"/>
						</td>
					</tr>
					<tr>
						<td> <appfuse:label styleClass="desc" key="Voyage.Vessel"/></td>
						<td>
							<form:errors path="vessel" cssClass="fieldError"/>
							<c:choose>
					    		<c:when test="${voyage.vessel != null && voyage.vessel.id > 0}">
									<form:select path="vessel.id" id="voyageVessel" items="${listVessels}" itemLabel="name" itemValue="id" class="select ui-widget-content ui-corner-all"/>
					    		</c:when>
					    		<c:otherwise>
									<form:select path="vessel" id="voyageVessel" items="${listVessels}" itemLabel="name" itemValue="id" class="select ui-widget-content ui-corner-all" />
					    		</c:otherwise>
					    	</c:choose>
						</td>
					</tr>
					<tr>
						<td> <appfuse:label styleClass="desc" key="Voyage.Description"/></td>
						<td colspan="3">
							<form:errors path="description" cssClass="fieldError"/>
							 <form:input path="description" id="voyageDescription" cssClass="text large ui-widget-content ui-corner-all" cssErrorClass="text large error"/>
						</td>
					</tr>
				</table>
			</fieldset>
			
			<!-- Intineraries -->
			<c:if test="<%=size>0 %>">
				<%
				for(int i = 0; i<size; i++){
					Itinerary itinerary = new Itinerary();
					for(int j=0; j<size; j++){
						if(listItineraries.get(j).getVisitOrder()==(i+1)){
							itinerary = listItineraries.get(j);
							break;
						}
					}
				%>
				<fieldset class="ui-widget ui-widget-content" style="width: 100%;margin-top: 12px; margin-bottom: 12px;">
					<legend class="ui-widget-header ui-corner-all" style="height: 12px;">
						<fmt:message key="Itinerary.Title" /> #<%=i+1 %>
					</legend>
					<table>
						<tr>
							<td> <appfuse:label styleClass="desc" key="Itinerary.Port"/></td>
							<td>
								<c:set var="port_Id" value="<%= itinerary.getPort().getId() %>"/>
								<select id="itineraryPort<%=(i+1) %>" name="itineraryPort<%=(i+1) %>" class="select ui-widget-content ui-corner-all">
									<option value="0">--------</option>
									<c:forEach var="item" items="${listPorts}">
										<option value="${item.id }" 
											<c:if test='${item.id == port_Id}'> 
						     					SELECTED 
						     				</c:if> 
										>
											${item.code } - ${item.name }
										</option>
									</c:forEach>
								</select>
							</td>
						</tr>
						<tr>
							<td><appfuse:label styleClass="desc" key="Itinerary.DepartureInScheduled"/></td>
							<td><input type="text" id="departureInScheduled<%=(i+1) %>" class="datepicker"  name="departureInScheduled<%=(i+1)%>" 
								<c:if test="<%=(itinerary.getDepartureInScheduled()!= null)%>">value="<%=simpleDateFormat.format(itinerary.getDepartureInScheduled()) %>"</c:if> >
							</td>
							<td><appfuse:label styleClass="desc" key="Itinerary.ArrivalInScheduled"/></td>
							<td><input type="text" id="arrivalInScheduled<%=(i+1)%>" class="datepicker"  name="arrivalInScheduled<%=(i+1)%>"
								<c:if test="<%=(itinerary.getArrivalInScheduled()!= null)%>">value="<%=simpleDateFormat.format(itinerary.getArrivalInScheduled()) %>"</c:if> >
							</td>
						</tr>
						<tr>
							<td><appfuse:label styleClass="desc" key="Itinerary.DepartureInFact"/></td>
							<td><input type="text" id="departureInFact<%=(i+1)%>" class="datepicker"  name="departureInFact<%=(i+1)%>"
								<c:if test="<%=(itinerary.getDepartureInFact()!= null)%>">value="<%=simpleDateFormat.format(itinerary.getDepartureInFact()) %>"</c:if> >
							</td>
							<td><appfuse:label styleClass="desc" key="Itinerary.ArrivalInFact"/></td>
							<td><input type="text" id="arrivalInFact<%=(i+1)%>" class="datepicker" name="arrivalInFact<%=(i+1)%>"
								<c:if test="<%=(itinerary.getArrivalInFact()!= null)%>">value="<%=simpleDateFormat.format(itinerary.getArrivalInFact()) %>"</c:if> >
							</td>
						</tr>
					</table>
				</fieldset>
				<%
				}
				%>				
			</c:if>
			
		</div><!-- End of data area -->
		
		<!-- Toolbar -->
		
		<div id="toolbar" style="width: 110%;">
			<button type="submit" id="add_maven" class="button" name="save" onclick="bCancel=false">
				<fmt:message key="button.save"/>
			</button>
		
			<c:if test="${param.from == 'list' and param.method != 'Add'}">
				<button type="submit" id="delete_maven" class="button" name="delete" onclick="bCancel=true;return confirmDelete('Voyage')">
					<fmt:message key="button.delete"/>
			    </button>
			</c:if>
		
		    <button type="submit" id="cancel_maven" class="button" name="cancel" onclick="location.href='<c:url value="/admin/voyageList.*"/>'">
		    	 <fmt:message key="button.cancel"/>
		    </button>
		    
		    <button type="button" id="add_itinerary" class="button" onclick="addItinerary()" style="width: 30%;">
		    	<fmt:message key="button.addItinerary"/>
		    </button>
		    
		    <button type="button" id="remove_itinerary" class="button" onclick="removeItinerary()" style="width: 35%;">
		    	<fmt:message key="button.removeItinerary"/>
		    </button>
		</div>
		
	</form:form>
</div>

<script type="text/javascript">
	
	var itine = 0;
	if(<%=size>0%>){
		itine = <%=size%>
	}
	function addItinerary(){
		itine++;
		var strApp = '<fieldset class="ui-widget ui-widget-content" style="width: 100%;margin-top: 12px; margin-bottom: 12px;">';
		strApp += '<legend class="ui-widget-header ui-corner-all" style="height: 12px;">';
		strApp += '<fmt:message key="Itinerary.Title" /> #'+itine;
		strApp += '</legend>';
		strApp += '<table>';
		strApp += '<tr>';
		strApp += '<td> <appfuse:label styleClass="desc" key="Itinerary.Port"/></td>';
		strApp += '<td>';
		strApp += '<select id="itineraryPort'+itine+'" name="itineraryPort'+itine+'" class="select ui-widget-content ui-corner-all">';
		strApp += '<option value="0">--------</option>';
		strApp += '<c:forEach var="item" items="${listPorts}">';
		strApp += '<option value="${item.id }">';
		strApp += '${item.code } - ${item.name }';
		strApp += '</option>';
		strApp += '</c:forEach>';
		strApp += '</select>';
		strApp += '</td>';
		strApp += '</tr>';
		strApp += '<tr>';
 		strApp += '<td><appfuse:label styleClass="desc" key="Itinerary.DepartureInScheduled"/></td>';
		strApp += '<td><input type="text" id="departureInScheduled'+itine+'" class="datepicker"  name="departureInScheduled'+itine+'" ></td>';
		strApp += '<td><appfuse:label styleClass="desc" key="Itinerary.ArrivalInScheduled"/></td>';
		strApp += '<td><input type="text" id="arrivalInScheduled'+itine+'" class="datepicker"  name="arrivalInScheduled'+itine+'" ></td>';
		strApp += '</tr>';
		strApp += '<tr>';
		strApp += '<td><appfuse:label styleClass="desc" key="Itinerary.DepartureInFact"/></td>';
		strApp += '<td><input type="text" id="departureInFact'+itine+'" class="datepicker"  name="departureInFact'+itine+'" ></td>';
		strApp += '<td><appfuse:label styleClass="desc" key="Itinerary.ArrivalInFact"/></td>';
		strApp += '<td><input type="text" id="arrivalInFact'+itine+'" class="datepicker"  name="arrivalInFact'+itine+'" ></td>'; 
		strApp += '</tr>';
		strApp += '</table>';
		strApp +='</fieldset>';
		var isRight = true;
		if(itine>2){
			var beforePort = document.getElementById('itineraryPort'+(itine-2)).value;
			var currentPort = document.getElementById('itineraryPort'+(itine-1)).value;
			if(beforePort==currentPort) isRight=false;
		}
		if(itine>1){
			var currentPort = document.getElementById('itineraryPort'+(itine-1)).value;
			if(currentPort==0) isRight=false;
		}
		if(isRight){
			$('#data_area').append(strApp);	
			document.voyage_form.numberOfItineraries.value = itine;
		}else{
			itine--;
		}
		
	}
	
	function removeItinerary(){
		var fields = $('fieldset').size();
		if(fields>1){
			$('fieldset:last').remove();
			itine--;
		}
	}
	$("#add_itinerary" ).button({
	    icons: {
	        primary: "ui-icon-circle-plus"
	    }
	});
	
	$("#remove_itinerary" ).button({
	    icons: {
	        primary: "ui-icon-circle-minus"
	    }
	});
	
	$("#add_maven" ).button({
	    icons: {
	        primary: "ui-icon-circle-plus"
	    }
	});
	
	$("#delete_maven" ).button({
	    icons: {
	        primary: "ui-icon-circle-minus"
	    }
	});
	
	$("#cancel_maven" ).button({
	    icons: {
	        primary: "ui-icon-circle-close"
	    }
	});
	
	$(function() {
		document.voyage_form.numberOfItineraries.value = itine;
		for(var i = 1; i<=itine; i++){
			var idValue = "#departureInScheduled"+i;
			/* $(idValue).datepicker({ dateFormat: 'dd/mm/yy' }); */
			$(".datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
		}
	});
</script>